<template>
  <div class="right-detail">
    <!-- <div class="right-detail-content"> -->
      <!-- <h2 class="right-detail-content-head">盛大汽车权益</h2> -->
      <!-- <van-cell-group class="right-detail-content-body">
        <van-cell class="right-cell" title="订单号" :value="details.interests" />
        <van-cell class="right-cell" title="权益发放时间" :value="details.createTime"/>
        <van-cell class="right-cell" title="权益失效时间" :value="details.expireTime" />
        <van-cell class="right-cell right-status" title="权益状态" :value="exchangeStatus(details.status)"/>
      </van-cell-group> -->

    <!-- </div> -->
    <!-- <van-cell-group>
			<van-cell value="兑换详情" />
		</van-cell-group> -->
      <h2>提现详情</h2>
      <div class="wxdetails">
        <div class="wxdetails_m">
          <h3>微信提现详情</h3>
          <ul>
            <li><span>订单号</span><span>{{details.orderNo}}</span></li>
            <li><span>兑换时间</span><span>{{details.exchangeTime}}</span></li>
            <li><span>兑换权益总量</span><span>{{details.interests}}</span></li>
            <li><span>实际微信到账红包</span><span>{{details.actualInterests}}</span></li>
            <li>
                <span>兑换状态</span><span class="red">{{details.exchangeStatus}}</span>
                <!-- <span v-if="details.exchangeStatus === 1" class="red">兑换成功</span>
                <span v-if="details.exchangeStatus === 0" class="red">兑换失败</span> -->
            </li>
            <li v-if="details.exchangeStatus === '失败'" class="failtext">
              <span>失败原因</span><span><b>企业结算周期内，暂时无法提现</b><p>当前权益额度已原路返回</p></span>
            </li>
          </ul>
        </div>
        <div class="explain">
          <h4>微信提现说明</h4>
          <ul>
            <li>1、微信提现手续费为95折，最低提现金额为2元</li>
            <li>2、到账时间24小时内到账</li>
            <li>3、查询方式：打开微信-我-钱包-零钱-零钱明细打款 商户包含：“盛大汽车字样”</li>
          </ul>
        </div>
      </div>
  </div>
</template>
<script>
import {getInFo} from './../../../api/ykdetails'
export default {
  name: 'wx-detail',
  data () {
    return {
      details: [],
      id: this.$route.query.id ? this.$route.query.id : sessionStorage.getItem('rightsId'),
      InfoParameter:{
				exchangeId: this.$route.query.exchangeId,
				exchangeType: 1,
				id: this.$route.query.id,
				status: ''
			},
    }
  },
  created () {
    // if (this.$route.query.id) {
    //   sessionStorage.setItem('rightsId', this.$route.query.id);
    // }
    this.getDetailsById();
  },
  methods: {
    getDetailsById () {
      const obj = {id: this.id, status: 1};

      if(this.$route.query.status === '兑换'){
				this.InfoParameter.status = 2;
			}
			if(this.$route.query.status === '失效'){
				this.InfoParameter.status = 0;
			}
			if(this.$route.query.status === '收益'){
				this.InfoParameter.status = 1;
			}
      getInFo(this.InfoParameter).then(res => {
        this.details = res.data;
      }).catch(error => {
        if (error.status !== 100 && error.status !== 102 ) {
          this.$toast.fail(error.message);
        }
      })
    }
  }
}
</script>

<style lang="less">
.right-detail{
  h2{
    background: #ffffff;
    text-align: center;
    height:50px;
    font-size:16px;
    font-family:PingFang SC;
    line-height:50px;
    color:#333333;
    opacity:1;
    border-bottom: 1px solid #E6F1F4;
  }
}
.wxdetails {
	background: #F2F2F2;padding:20px 0;
	.wxdetails_m{
		background: #fff;
    h3{height: 60px;line-height: 60px;font-size: 18px;color: #333333;text-align: center;border-bottom: 1px solid #E6F1F4;font-weight:300;}

		ul{
			padding: 20px;
			li{
				line-height: 25px;
				span{color: #888888;}
				span:nth-of-type(2){float: right;color: #333333;}
			}
		}
  }
  .explain{
    background: #fff;margin-top: 10px;
    h4{height: 40px;line-height: 40px;font-size: 14px;font-weight: normal; color: #333333;text-align: left;border-bottom: 1px solid #E6F1F4;padding-left: 20px;}
    ul{
      padding: 20px;
      li{line-height: 23px;color: #333333;}
    }

  }
}
.red {color: #F80606 !important;}
.instructions {width: 100%;display: block;margin: 0 auto;margin-bottom: 50px;padding-bottom:35px;border-bottom: 1px solid #EFEFEF;}
.span_test {margin-left: 20px;color: #1A8EBF;}
.failtext {
  border-top: 1px solid #EFEFEF;padding: 20px 0;margin-top:15px;
  span:nth-of-type(2){
    text-align: right;
    b{
      font-weight: normal;text-align: right;
    }
    p{color: #888888;}
  }
}
// .right-detail{
//   padding-top: 30px;
//   width: 100%;
//   height: 100%;
//   position: fixed;
//   background: #F2F2F2;
//   .right-detail-content{
//     background: #fff;
//     .right-detail-content-head{
//       text-align: center;
//       height:50px;
//       font-size:18px;
//       font-family:PingFang SC;
//       font-weight:300;
//       line-height:50px;
//       color:rgba(51,51,51,1);
//       opacity:1;
//       border-bottom: 1px solid #E6F1F4;
//     }
//     .right-detail-content-body{
//       padding: 10px 20px;
//       .right-cell{
//         height: 40px !important;
//         line-height: 40px !important;
//         padding: 0px;
//         font-size: 14px !important;
//         .van-cell__title{
//           color: #888888 !important;

//         }
//       }
//       .right-status{
//         .van-cell__value{
//           color: #EDA23D !important;
//         }
//       }
//       .van-cell:not(:last-child)::after {
//         border-bottom: none !important;
//       }
//     }
//   }
// }
</style>
